<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/manager/easyui/themes/icon.css}">
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/manager/easyui/jquery.easyui.min.js}"></script>
	<script type="text/javascript">
	    //工具栏
	    var toolbar = [{
	        text: '修改',
	        iconCls: 'icon-edit',
	        handler: function () {


                $('#dd').dialog('open');

                var row =$('#userlist').datagrid('getSelected');
                var select =$('#mySelect').val()
                $('#id').textbox('setValue',row.id);
                $('#name').textbox('setValue',row.name);

                for(var j=0;j<row.permissions.length;j++){
                           console.log(row.permissions[j])
                    if(row.permissions[j].parentId!=0){
                var node = $('#ah').tree('find',row.permissions[j].id);

                $('#ah').tree('check',node.target)
                    }


                }





	        }
	    }, '-', {
	        text: '删除',
	        iconCls: 'icon-cancel',
	        handler: function () {
                var row =$('#userlist').datagrid('getSelected');
                console.log(row.id)
                $.ajax({
                    url:'/manager/role/removeRole',
                    dataType:'json',
                    data:{
                        'id':row.id,
                    },
                    type: 'post',
                    success:function (result) {


                    }

                })



	            alert('delete') }
	    }];
	   $(function(){



           $('#userlist').datagrid({
			title:'角色列表',  
			iconCls:'icon-save',   
			url:'/manager/role/findAll',
			columns:[
			    [
				{field:'id',title:'角色ID',width:100,align:'center'},
				{field:'name',title:'角色名称',width:100,align:'center'},
				{field:'permissions',title:'角色拥有的权限[权限名 | 权限URL | 模块名 | 操作名 ]',width:500,align:'center',formatter:format}
			]
            ],
			pagination:true,
			toolbar: toolbar,
            singleSelect:true,
            pageSize: 5,
            pageList: [5,10,20]
		});
		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                $('#userlist').datagrid({ queryParams:

                        {
                            "name": $('#roleName').val()
                        }


                });   //点击搜索
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                    var ids="";
                        var nodes = $('#ah').tree('getChecked', ['checked','indeterminate']);

                        for(var i=0;i<nodes.length;i++){
                            ids+=nodes[i].id
                            if(i!=nodes.length-1){
                                ids+=",";
                            }
                        }


                        console.log(ids)
                        $.ajax({
                            url:'/manager/role/modifyRole',
                            dataType:'json',
                            data:{
                                'id':$('#id').val(),
                                'ids':ids,
                                'name':$('#name').val()
                                },
                            type: 'post',
                            success:function (result) {

                                if(result.success==true){


                                    $('#dd').dialog('close');
                                    $('#userlist').datagrid('reload')




                                }else{
                                alert('修改出错')
                                    $('#userlist').datagrid('reload')
                                    $('#dd').dialog('close');
                                }



                            }

                        })

                    }
                },{
                    text:'关闭',
                    handler:function(){
                        var row =$('#userlist').datagrid('getSelected');
                        for(var j=0;j<row.permissions.length;j++){
                            console.log(row.permissions[j])
                            if(row.permissions[j].parentId!=0){
                                var node = $('#ah').tree('find',row.permissions[j].id);

                                $('#ah').tree('uncheck',node.target)
                            }


                        }
                        $('#dd').dialog('close');
                    }
                }]
			});
			
		   //tree选项框初始化
           $("#ah").tree({
               url:'/manager/role/findAllPermission',
			   method:'post',
			   animate:true,
			   checkbox:true,
               formatter:function (node) {
                   return node.name
               }

           });
            
	   });
	   
	    //列格式化方法
	   function format(val,row){
	        var sel="<select name='search_type' id='mySelect'>";

	        for(var i=0;i<row.permissions.length;i++){
	            if(null==row.permissions[i].url || ""==row.permissions[i].url){
                    row.permissions[i].url="无url";
                }
                if(row.permissions[i].parentPermission!=null){

                sel+="<option>"+row.permissions[i].name+"|"+row.permissions[i].url+"|"+row.permissions[i].parentPermission.name+"|"+row.permissions[i].sname+"</option>";
            }
                }
                sel +="</select>";
			return sel;
	  }
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>角色查询：</strong></td>
    <td height="30">
        <input type="text" name="keyword" id="roleName" size=20 placeholder="角色名称"/>
        <a id="submit_search">搜索</a>
    </td>
  </form>
  <table id="userlist"></table>
    <div id="dd">
           <div align="center" style="margin-top: 30px">
            <form id="ff" method="post">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="id" id="id" style="width:50%" data-options="label:'角色ID:'" readonly="readonly"/>
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" id="name" style="width:50%" data-options="label:'角色名称:',required:true">
            </div>
             <div style="margin-bottom:20px">
                  <table style="width:48%">
                    <td valign="top" style="width:50px">
                                                              权限:
                    </td>
                    <td><ul id="ah"></ul></td>
                  </table>
            </div>
        </form>
           </div>
    </div>
</body>
</html>